import React, { FC } from 'react'
import ReactEcharts from 'echarts-for-react'


interface Props  {
  option: object;
  style?: object;
}
let yAxisCommon = {
  nameTextStyle:{
    color:'#b9b9b9'
     
  },
  axisLine:{
    lineStyle:{
      color:'#b9b9b9',
      width:0
    }
  },
  axisTick:false,
  splitLine:{
    show: true,
    interval: 'auto',
    lineStyle: {
      color: ['rgba(163,205,255,.1)']
    }
  }
}
let xAxisCommon = {
  nameTextStyle:{
    color:'rgba(163,205,255,.1)'
  },
  scale:true,
  axisLine:{
    lineStyle:{
      color:'#b9b9b9',
      width:1
    },
    textStyle:{
      color:'rgba(163,205,255,.1)'
    }
  },
  axisLabel: {
    textStyle: {
        color: '#b9b9b9'
    }
  },
}
const MyEcharts: FC<Props> = ({
  option = {},
  style = {},
}) => {
  //设置图表 X和Y轴字体分割线字体颜色
  
  let yAxis = option['yAxis'];
  let xAxis = option['xAxis'];
  if(Object.prototype.toString.call(yAxis)==="[object Array]"){
    yAxis.map((e,i)=>{
      yAxis[i] = {
        ...yAxisCommon,
        ...e,
      }
      return 1
    })
  }
  if(Object.prototype.toString.call(yAxis)==="[object Object]"){
    yAxis = {
      ...yAxisCommon,
      ...yAxis
    }
  }
  if(Object.prototype.toString.call(xAxis)==="[object Array]"){
    xAxis.map((e,i)=>{
      xAxis[i] = {
       
        ...xAxisCommon,
        ...e
      }
      return 1
    })
  }
  if(Object.prototype.toString.call(xAxis)==="[object Object]"){
    xAxis = {
      ...xAxisCommon,
      ...xAxis
    }
  }
  
  const options = {
   
    color:['#2B81FF','#F6BD16','#FF7400','#FFE765','#00F298'],
    grid: {
      left: '8%',
      right: '8%',
      top: '15%',
      bottom: '8%'
    },
    yAxis:yAxis,
    xAxis:xAxis,
    legend: {
      color:'#fff'
    },
    ...option,
  }
  return <ReactEcharts option={options} style={style} />
}

export default MyEcharts
